<template>
  <!--下拉刷新容器-->
  <!-- <router-link :to="'/home/newsinfo/' + item.id"></router-link> -->
  <!-- 在网页中，有两种跳转方式： -->
  <!-- 方式1： 使用 a 标签 的形式叫做 标签跳转  -->
  <!-- 方式2： 使用 window.location.href 的形式，叫做 编程式导航 -->
  <!-- 编程式导航 -->
  <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
      <!--数据列表-->
      <ul class="mui-table-view mui-table-view-chevron">
        <li
          class="mui-table-view-cell mui-media"
          v-for="(item) in newList"
          :key="item.id"
          @tap="skip(item.id)"
        >
          <img class="mui-media-object mui-pull-left" :src="item.pic || '未知'">
          <div class="mui-media-body">
            <h1>{{ item.title}}</h1>
            <p class="mui-ellipsis">
              <span>发表时间：{{ item.time }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// 1. 导入 mui 的js文件
import mui from "../../lib/mui/js/mui.min.js";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newList: [], //新闻列表
      flag: false,
      end: 0
    };
  },
  created() {
    this.getNewList();
  },
  mounted() {
    mui.init({
      pullRefresh: {
        container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        up: {
          height: 50, //可选.默认50.触发上拉加载拖动距离
          auto: true, //可选,默认false.自动上拉加载一次
          contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore: "没有更多数据了", //可选，请求完毕若没有更多数据时显示的提醒内容；
          callback: this.pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
      }
    });
  },
  methods: {
    getNewList() {
      // 获取新闻列表
      this.$http
        .get(
          `/news/get?channel=头条&start=${this.start}&num=${
            this.end
          }&appkey=055412fc5fee23e4`
        )
        .then(result => {
          if (result.status == 200) {
            // console.log(result.body.result.list);
            // 如果没有失败，应该把数据保存到 data 上
            result.body.result.list.forEach((item, index) => {
              item.id = index;
            });
            this.newList = result.body.result.list;
          } else {
            Toast("获取新闻列表失败！");
          }
        });
    },
    //下拉加载数据
    pulldownRefresh() {
      var self = this;
      setTimeout(function() {
        self.end += 20;
        self.flag = self.end >= 70 ? true : false;
        self.getNewList();
        mui("#refreshContainer")
          .pullRefresh()
          .endPullupToRefresh(self.flag); //参数为true代表没有更多数据了
      }, 500);
    },
    skip(id) {
      //name 是路由的名字pash里面 path 和name 不能同时出现
      // 使用JS的形式进行路由导航

      // 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
      // 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
      // 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
      // 1. 最简单的
      // this.$router.push("/home/goodsinfo/" + id);
      // 2. 传递对象
      // this.$router.push({ path: "/home/goodsinfo/" + id });
      // 3. 传递命名的路由
      // mui("#refreshContainer").on("tap", "li", function() {
      //   // 逻辑代码，例如跳转详情页、ajax  这里的this指向的改
      //   this.$router.push({ name : 'NewsInfo' , params : { id : id }});
      // });
      this.$router.push({ name : 'NewsInfo', params: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
* {
  touch-action: none;
}
#refreshContainer {
  flex: 1;
}
.mui-table-view {
  li {
    h1 {
      font-size: 14px;
    }
    .mui-ellipsis {
      font-size: 12px;
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>


